<template>
  <div>
    <el-form :inline="true" :model="f1" class="demo-form-inline">
      <el-form-item label="设备名称">
        <el-select v-model="f1.stockId" placeholder="请选择">
          <el-option
            v-for="base in basestocknos"
            :label="base.name"
            :value="base.id"
            :key="base.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="购买人">
        <el-input v-model="f1.buyman"></el-input>
      </el-form-item>
      <el-form-item label="购买日期">
        <el-date-picker
          v-model="f1.buyDate"
          type="date"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="reset">清空</el-button><br />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="exportExcel">导出数据</el-button>
    <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
    <el-table
      :data="buycheck1"
      border
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="" width="150" v-if="false">
      </el-table-column>
      <el-table-column prop="buycheckId" label="" width="150" v-if="false">
      </el-table-column>
      <el-table-column prop="buyCheck.buyDate" label="购买日期" width="120">
      </el-table-column>
      <el-table-column prop="buyCheck.no" label="设备编号" width="120">
      </el-table-column>
      <el-table-column prop="buyCheck.name" label="设备名称" width="120">
      </el-table-column>
      <el-table-column prop="buyCheck.description" label="设备描述" width="180">
      </el-table-column>
      <el-table-column prop="buyCheck.buySum" label="采购数量" width="120">
      </el-table-column>
      <el-table-column prop="buyCheck.money" label="采购金额" width="120">
      </el-table-column>
      <el-table-column prop="buyCheck.buyman" label="采购人" width="120">
      </el-table-column>
      <el-table-column prop="realprice" label="实际单价" width="120">
      </el-table-column>
      <el-table-column prop="realbuyCount" label="实际购买量" width="120">
      </el-table-column>
      <el-table-column prop="realcost" label="实际花费" width="120">
      </el-table-column>
      <el-table-column prop="dec" label="反馈" width="120"> </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="修改状态" width="150">
        <template slot-scope="scope">
          <el-button
            type="success"
            @click="check(scope.row)"
            round
            v-if="scope.row.status == '未完成'"
            >提交</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="5"
      @current-change="change"
    >
    </el-pagination>
    <!-- 添加修改页面弹出框 -->
    <el-dialog title="反馈采购清单" :visible.sync="dialogUpdateVisible">
      <el-form :model="update" label-width="100px" ref="update">
        <el-form-item label="id" prop="id" v-if="false">
          <el-input v-model="update.id"></el-input>
        </el-form-item>
        <el-form-item label="id" prop="buycheckId" v-if="false">
          <el-input v-model="update.buycheckId"></el-input>
        </el-form-item>
        <el-form-item
          label="实际单价"
          prop="realprice"
          style="width: 300px"
        >
          <el-input v-model="update.realprice" placeholder="必须为数字值"></el-input>
        </el-form-item>
        <el-form-item
          label="实际数量"
          prop="realbuyCount"
          style="width: 300px"
        >
          <el-input v-model="update.realbuyCount" placeholder="必须为数字值"></el-input>
        </el-form-item>
        <el-form-item
          label="实际金额"
          prop="realcost"
          style="width: 300px"
        >
          <el-input v-model="update.realcost" placeholder="必须为数字值"></el-input>
        </el-form-item>
        <el-form-item label="反馈" prop="dec" style="width: 600px">
          <el-input type="textarea" v-model="update.dec" :rows="5"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeStatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      f1: {
        stockId: "",
        buyman: "",
        buyDate: "",
        pageIndex: 1,
      },
      buycheck1: [],
      basestocknos: {},
      total: 100,
      multipleSelection: [],
      dialogUpdateVisible: false,
      update: {
        id: 0,
        buycheckId: 0,
        realprice: "",
        realbuyCount: "",
        realcost: "",
        dec: "",
        status: "",
      },
    };
  },
  methods: {
    //取消所有行
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //得到所选行
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    // 导出表格所用
    exportExcel() {
      import("@/utils/Export2Excel").then((excel) => {
        const tHeader = [
          "购买单号",
          "审核单号",
          "实际单价",
          "实际购买量",
          "实际花费",
          "状态",
        ]; // 表头数据
        const filterVal = [
          "id",
          "buycheckId",
          "realprice",
          "realbuyCount",
          "realcost",
          "status",
        ]; //对应的字段名
        const list = this.multipleSelection;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel(tHeader, data, "已审核列表");
      });
    },
    //得到设备列表
    getbasestock() {
      this.axios.get("/buy/getBaseStocks").then((res) => {
        //console.log(res.data.data);
        this.basestocknos = res.data.data;
      });
    },
    //查询
    onSubmit() {
      console.log(this.f1);
      this.getbuyback();
    },
    //分页
    change(currentPage) {
      console.log("sada" + currentPage);
      this.f1.pageIndex = currentPage;
      this.getbuyback();
    },
    //查询购买清单
    getbuyback() {
      this.axios.post("/buyback/getbuybacks", this.f1).then((res) => {
        console.log(res.data);
        this.buycheck1 = res.data.data.list;
        this.pageIndex = res.data.data.pageNum;
        this.total = res.data.data.total;
      });
    },
    //修改状态
    check(buyback) {
      this.update.id = buyback.id;
      this.update.buycheckId = buyback.buycheckId;
      this.dialogUpdateVisible = true;
    },
    //修改状态
    changeStatus() {
      this.update.status = "已完成";
      this.axios.post("/buyback/update", this.update).then((res) => {
         if(res.data.code==200){
              this.getbuyback();
          this.dialogUpdateVisible = false;
                this.$message({
                  message: "成功",
                  offset:150,
                  duration:1000,
                  type: 'success'
                });
          }else{
             this.$message.error({
                message: "失败",
                offset:150,
                duration:1000
              });
          }
      });
    },
    reset() {
      (this.f1.stockId = ""),
        (this.f1.buyman = ""),
        (this.f1.buyDate = ""),
        this.getbuyback();
    },
  },
  created() {
    this.getbuyback();
    this.getbasestock();
  },
};
</script>
<style scoped>
</style>